<script setup lang="ts">
import { ref } from 'vue'
import { getMemberListAPI } from '@/api/member'
import { payAPI } from '@/api/common'
import { pay } from '@/utils/payMent'
import { useUserStore } from '@/stores/user'

const useUser = useUserStore()

const levelIndex = ref(1)

const pageDate = ref([])

const fetchData = async () => {
    const res = await getMemberListAPI()
    pageDate.value = res.data
}

const memberId = ref(1)

onLoad(async () => {
    console.log('useUser.userInfo', useUser.userInfo)
    memberId.value = useUser.userInfo.memberId
    await fetchData()
})

const swiperChange = (e: any) => {
    levelIndex.value = e.detail.current + 1
    console.log(levelIndex.value)
}

const payData = ref({})

const onPay = async () => {
    console.log('pay')
    const res = await payAPI({
        payMethod: 1,
        payType: 6,
        memberId: pageDate.value.find((item: any) => item.level === levelIndex.value)?.id || ''
    })
    payData.value = res.data
    if (res.code == 20040) {
        show.value = true
        return
    }
    pay(payData.value.body).then()
}

const btnStyle = {
    1: {
        background: 'linear-gradient(100deg, #B4DBFB 2%, #95C7F6 98%)',
        color: '#272E56'
    },
    2: {
        background: 'linear-gradient(100deg, #D8B4FB 2%, #AD95F6 98%)',
        color: '#272E56'
    },
    3: {
        background: 'linear-gradient(90deg, #291B09 0%, #2B2004 100%)',
        color: '#FFF7E3'
    }
}

const btnTextStyle = {
    1: {
        color: '#EDF4FF'
    },
    2: {
        color: '#D8B4FB'
    },
    3: {
        color: '#3D3D3D'
    }
}

const btnMinTextStyle = {
    1: {
        color: '#EDF4FF'
    },
    2: {
        color: '#706786'
    },
    3: {
        color: '#AA8756'
    }
}
</script>

<template>
    <view
        class="top-box"
        @click="$jump(`/views/subViews/common/serviceProtocol?title=会员等级规则&type=9`)"
    >
        <view v-for="(item, index) in pageDate">
            <image
                v-if="levelIndex === item.level"
                class="top-img"
                :src="$getImg(`/img/member/topRule-${levelIndex}.png`)"
            ></image>
        </view>
    </view>

    <swiper
        previous-margin="20rpx"
        next-margin="20rpx"
        @change="swiperChange"
        :circular="true"
        :indicator-dots="false"
        :interval="5000"
        :duration="150"
        style="height: 278rpx; width: 100%"
        :current="Number(useUser.userInfo.memberId || 1) - 1"
    >
        <swiper-item v-for="(item, index) in pageDate" :key="index">
            <view
                class="banner-item"
                :style="{
                    backgroundImage: `url(${$getImg(
                        useUser.userInfo.memberId == index + 1
                            ? `/img/member/memberUnlock${index + 1}.png`
                            : `/img/member/banner-${index + 1}.png`
                    )})`
                }"
            ></view>
        </swiper-item>
    </swiper>

    <view class="content-box mt-[26rpx]">
        <view v-for="item in pageDate">
            <image
                class="content-item"
                v-if="levelIndex === item.level"
                :src="$getImg(`/img/member/content-${levelIndex}.png`)"
            ></image>
        </view>
    </view>
    <!--    v-if="!useUser.userInfo.memberId"-->
    <view
        class="btn-box mt-[50rpx]"
        v-if="(useUser.userInfo.memberId ? Number(useUser.userInfo.memberId) : 0) < 3"
    >
        <view v-for="item in pageDate">
            <view
                v-if="levelIndex === item.level"
                class="btn-item u-flex u-row-between"
                :style="{
                    backgroundImage: `url(${$getImg(`/img/member/btn-${levelIndex}.png`)})`
                }"
            >
                <view>
                    <view :style="btnTextStyle[levelIndex]">
                        <text class="btn-title">升级为U客体验版</text>
                        <text class="btn-icon">¥</text>
                        <text class="btn-price">{{ item.amount }}</text>
                    </view>
                    <!--<view v-if="levelIndex !== 1" :style="btnMinTextStyle[levelIndex]">-->
                    <!--    开通后第二年年费为¥3980/年</view-->
                    <!--&gt;-->
                </view>

                <view class="btn" :style="btnStyle[levelIndex]" @click="onPay()">立即开通</view>
            </view>
        </view>
    </view>
</template>

<style>
page {
    background: #0e0d07;
}
</style>
<style scoped lang="scss">
.top-box {
    padding: 0 16rpx;
    margin: 16rpx 0;
}

.top-img {
    width: 100%;
    height: 60rpx;
}

.banner-item {
    width: 99%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.content-box {
    padding: 0 34rpx;
    .content-item {
        width: 100%;
        height: 648rpx;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

.btn-box {
    padding: 0 34rpx;
    .btn-item {
        width: 100%;
        padding: 8rpx 8rpx 8rpx 40rpx;
        height: 112rpx;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .btn-title {
        font-size: 28rpx;
    }
    .btn-icon {
        margin-left: 10rpx;
        font-weight: 600;
        font-size: 24rpx;
    }
    .btn-bottom-text {
        font-size: 18rpx;
    }
    .btn-price {
        font-weight: 600;
        font-size: 46rpx;
    }
    .btn {
        padding: 26rpx 38rpx;
        border-radius: 215px;
        font-weight: 600;
        font-size: 32rpx;
    }
}
</style>
